iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
1
Modern Web

前端建置工具完全手冊系列 第 26

Day 26 介紹 vite

  • 分享至 

  • xImage
  •  

vite 是 Vue.js 的作者所做的一個新的 bundler ,如果你有用過應該會知道,它最特別的部份是它在開發時不做打包,而是用原生瀏覽器支援的 es6 module 來載入相依性,這個概念其實也不算是最早的,在那之前還有個 snowpack 也是採用不打包的型式,不過這樣的概念應該是跟著 vite 紅起來的

那不打包的作法有什麼好處呢?

  • 若要打包的話 webpack 就必須要在一開始走訪所有的檔案來取得相依性,這使得啟動的時間會加長
  • hot reload 時也不需要額外的檢查檔案的相依性,讓瀏覽器去處理就行了

不過 vite 在 production build 時還是會做打包,而且用的是 rollup ,因為如果像在開發時不打包,那瀏覽器就必須要發出一個個的 request 來取得各個 js 檔,這樣才知道下一個相依性在哪,才能再取得下一個,而且實際環境的瀏覽器也可能還不支援 module

還有它在開發時也會用 rollup 打包套件的部份,為了加快載入速度,比如像 vue 自身,因為這些套件在開發時通常不會去動到,只要打包一次,之後載入也只要載入一個檔案就行了

安裝與使用

最方便的應該是用 create-vite-app 來建一個 vite 的專案

$ create-vite-app vite-app

預設會建立的是 Vue 的專案,畢竟是 Vue 的作者做的,不過也有其它樣版,像 React :

$ create-vite-app --template react vite-app

如果要自己安裝的話也是可以的,只要建一個專案並安裝 vite 就行了

$ yarn add --dev vite

它在這部份有點像 Parcel (雖然底下的原因並不是) ,你需要放一個 index.html 在專案的目錄,並用 type="module" 的形式引入你的 js 才行,像:

<script type="module" src="/src/index.js"></script>

vite 啟動後只有開啟它的 server 與找可以預先打包的套件而已,它實際處理程式碼要等到瀏覽器的 request 進來,也就是要求 /src/index.js

另外稍微提一下 snowpack , snowpack 跟 vite 最大的差別應該是 snowpack 其實在 production build 時預設也是不會把程式碼打包的,這部份是 plugin 在做的,而它目前只有 webpack 的 plugin

下一篇是 gulp 這個老牌的 task runner


上一篇
Day 25: 實作個 postcss plugin
下一篇
Day 27 介紹 gulp
系列文
前端建置工具完全手冊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言